<template>
	<view>
		<!-- <view style="text-align: center;">
			姓名:{{ userName }}
		</view> -->
		<!-- 选项卡头部 -->
		<!-- <scroll-view class="tab" scroll-x="true"  :scroll-left="scrollLeft" >
			<block v-for="(item,index) in tabData" :key="index" > -->
		<!-- 标签动态样式 -->
		<!-- <view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index" @click="clickTab">
					{{item.title}} 
				</view>
			</block>		
		</scroll-view> -->

		<!-- 选项卡页面 -->
		<u-empty v-if="empty==0" textSize='15' mode="data"
			icon="https://cdnjson.com/images/2023/10/17/cbbd3de693b44e84afe2593f449acbb6.png">
		</u-empty>
		<swiper class="swiper" :current="currentTab" duration="300" @change="swiperTab"
			:style=" {height: windowHeight +'px'} ">
			<swiper-item v-for="(item,index) in tabData" :key="index">
				<scroll-view scroll-y="true" :style=" {height: windowHeight +'px'} " @scrolltolower="getMore">
					<view class="page-item">
						<view v-for="(item,index2) in contentData" :key="index2">
							<view @click="clickb(item)" v-if="currentTab==item.type">
								<view class="hots" v-if="type===0">
									<view class="left_icon">
										<view class="iconfont">
											<image :src="item.imgeUrl"
												style="width: 30px;height: 30px; padding-top: 10px;" :name="icon"
												:color="colors" size="12"></image>
										</view>
									</view>
									<view class="center">
										<view :class="item.time!=''?'p1':'title'" :style="'color: '+titleColor">
											{{item.time}}
										</view>
										<!-- <view class="p2" v-if="item.time!=''">{{item.time}}</view> -->
									</view>
									<view class="right" v-if="showmore">
										<image src="../../../static/箭头.png"
											style="width: 20px;height: 20px; padding-top: 5px;" class="right_img"
											name="arrow-right" color="gray"></image>
									</view>
								</view>
							</view>
							<!-- v-if="currentTab==item.type" 只渲染当前页面对应的数据，不然每个页面的内容都相同 -->
							<!-- <view class="page-item-box" v-if="currentTab==item.type" @click="clickb(item)"  >   
								<image class="box-image"  mode="aspectFill" :src="item.imgeUrl" ></image>
								<view> {{item.content}} </view>
							</view>	 -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				empty: '0',
				item: [],
				userName: '',
				currentTab: 0, //标签初始位置
				scrollLeft: 0, //tab标题的滚动条位置			
				windowHeight: 0,
				windowWidth: 0,

				tabData: [ //标签数据
					{
						type: 0,
						title: "未完成工单"
					},
					{
						type: 1,
						title: "已完成工单"
					},
				],
				contentData: [

				] //内容数据				
			}
		},
		props: {
			colors: {
				type: String,
				default: '#55aaff'
			},
			titleColor: {
				type: String,
				default: '#000'
			},
			title: {
				type: String,
				default: ''
			},
			subtitle: {
				type: String,
				default: ''
			},
			showmore: {
				type: Boolean,
				default: true
			},
			type: {
				type: Number,
				default: 0
			},
			icon: {
				type: String,
				default: "star-fill"
			}
		},

		onLoad(option) {
			this.item = JSON.parse(option.item)
			console.log(this.item.data, "******")
			if (this.item.data[0].length > 0) {
				this.empty = 1
				this.getPageData()
				this.getData()
			}
			// console.log("-----------------------------")
			wx.getSystemInfo({ //获取系统信息
				success: (res) => {
					this.windowHeight = res.windowHeight
					this.windowWidth = res.windowWidth
				}
			});

		},

		methods: {
			//获取页面数据
			getPageData() {
				for (var i = 0; i < this.item.data[0].length; i++) {
					// console.log(data[i])
					let l = [{
						content: this.item.data[0][i].content,
						createBy: this.item.data[0][i].createBy,
						createTime: this.item.data[0][i].createTime,
						lat: this.item.data[0][i].lat,
						lng: this.item.data[0][i].lng,
						location: this.item.data[0][i].location,
						picturepath: this.item.data[0][i].picturepath,
						problemid: this.item.data[0][i].problemid,
						problemtype: this.item.data[0][i].problemtype,
						recordingtime: this.item.data[0][i].recordingtime,
						remark: this.item.data[0][i].remark,
						searchValue: this.item.data[0][i].searchValue,
						serialnumber: this.item.data[0][i].serialnumber,
						updateBy: this.item.data[0][i].updateBy,
						updateTime: this.item.data[0][i].updateTime,
						userId: this.item.data[0][i].userId,
						workid: this.item.data[0][i].workid,
						type: "0",
						imgeUrl: "/static/历史记录1.png",
						content1: this.item.data[0][i].problemtype,
						time: this.item.data[0][i].recordingtime
					}]
					this.contentData.push(l[0])

				}
				console.log(this.contentData)
				console.log(this.item.data[0][0].problemtype)


			},
			viewJobDetails() {
				// console.log(this.contentData + "============")
				uni.$on('send', () => {
					uni.$emit("contentData", this.contentData)
					// 传参 或 传递一个对象 uni.$emit("cardMsg", {})
					// console.log('发送数据');
				})
			},
			//点击切换
			clickTab(e) {
				let clickIndex = e.target.dataset.current //当前标签的索引
				let singleNavWidth = this.windowWidth / 5 //每个标签的宽度, 显示5个标签		
				this.scrollLeft = (clickIndex - 2) * singleNavWidth //水平滚动条位置, tab选项居中 

				if (this.currentTab === clickIndex) {
					return false;
				} else {
					this.currentTab = clickIndex //使页面对应标签	
					this.getData()
				}
			},

			//滑动切换
			swiperTab(e) {
				let swiperIndex = e.detail.current //当前页面的索引
				let singleNavWidth = this.windowWidth / 5 //每个标签的宽度 ,显示5个标签
				this.scrollLeft = (swiperIndex - 2) * singleNavWidth //使标签跟随页面滚动,超过屏幕范围的标签显示出来
				this.currentTab = swiperIndex //使标签对应页面	
				this.getData()
			},

			//根据页面索引获取对应的云数据
			getData() {
				let type = this.currentTab
			},

			// 加载更多
			getMore() {
				//this.getData()
			},
			clickb(item) {
				// console.log(item)
				//跳转到数据所传递到的页面
				uni.navigateTo({
					url: `/pages/afterSaleVue/detailsOfHistoricalIssues/detailsOfHistoricalIssues?item=${JSON.stringify(item)}`
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
	}

	.tab {
		/* 标签栏 */
		height: 80rpx;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 80rpx;
		background: #f7f7f7;
		font-size: 16px;
		white-space: nowrap;
		/* 固定吸顶 */
		/* position: fixed; */
		top: 0;
		left: 0;
		z-index: 99;
	}

	.tab-item {
		/* 单个标签 */
		width: 50%;
		display: inline-block;
		text-align: center;
	}

	.active {
		/* 选项卡活动时的样式 */
		color: #ffaa00;
		font-size: 20px;
	}

	.page-item {
		// display: flex;
		// flex-direction: row;
		// flex-wrap: wrap;		
		// justify-content: flex-start;		
		align-items: center;
		padding-top: 30rpx;
		padding-left: 16rpx;
	}

	.page-item-box {
		display: flex;
		flex-direction: column;
		height: 320rpx;
		width: 220rpx;
		/* background-color: #808080; */
		/* border:1px solid #cc22b0; */
		/* 边框 */
		border-radius: 5px;
		box-shadow: 0 2px 2px rgba(34, 25, 25, 0.4);
		/* 框阴影 */
		text-align: center;
		/* 居中对齐 */
		margin: 10rpx;
	}

	.box-image {
		height: 280rpx;
		width: 220rpx;
		border-radius: 5px;
	}

	.hots {
		padding: 0 3%;
		padding-top: 10upx;
		height: 120upx;
		border-bottom: 1upx solid #F8F8F8;
		overflow: hidden;
	}

	.hots:active {
		opacity: 0.8;
	}

	.left_icon {
		float: left;
	}

	.left_icon .iconfont {
		font-size: 46upx;
		display: inline-block;
		margin-right: 20upx;
		line-height: 100upx;
	}

	.center {
		float: left;

	}

	.title {
		font-size: 28upx;
		font-weight: 500;
		color: #000;
		line-height: 90upx;
		margin-top: 10upx;
		margin-top: -10px;
	}

	.p1 {
		font-size: 28upx;
		font-weight: 500;
		line-height: 50upx;
		margin-top: 10upx;
	}

	.p2 {
		font-size: 24upx;
		color: #999;
	}

	.right {
		float: right;
	}

	.right .right_img {
		width: 40upx;
		height: 40upx;
		display: inline-block;
		margin-top: 28upx;
	}
</style>